<!--
 * @Date: 2024-09-27 09:01:39
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-03-25 14:18:45
 * @Description: 完整布局编辑 
-->
<template>
  <ContainerItemWrapper :widget="widget">
    <div :key="widget.id"
      :ref="widget.id"
      :class="[
        'layout-container',
        'layout-full-container',
        'layout-render-container',
        enableAside ? 'layout-aside-enable' : '',
        customClass
      ]"
      v-show="!widget.options.hidden"
    >
      <VfLayoutFull
        :="layoutAttrs"
        :style="{ 'min-height': `${minHeight}px` }"
        :showBorder="false"
        :designState="false"
        :enableAside="enableAside"
        :upDownEnabled="upDownEnabled"
        :mainCondition="mainCondition"
      >
        <template #header_left>
          <RenderWigetComp
            mark="header-left"
            :widget="widget"
            :widgetList="widget.widgetList.headerLeftList"
          >
          </RenderWigetComp>
        </template>
        <template #header_right>
          <RenderWigetComp
            mark="header-right"
            :widget="widget"
            :widgetList="widget.widgetList.headerRightList"
          >
          </RenderWigetComp>
        </template>
        <template #aside>
          <RenderWigetComp
            mark="header-aside"
            :widget="widget"
            :widgetList="widget.widgetList.asideList"
          >
          </RenderWigetComp>
        </template>
        <template #condition_content>
          <el-form  :inline="true" label-width="auto">
            <RenderWigetComp
              mark="condition-content"
              :widget="widget"
              :widgetList="widget.widgetList.conditionLeftList"
            >
            </RenderWigetComp>
          </el-form>
        </template>
        <template #condition_toolbar>
          <RenderWigetComp
            mark="condition-toolbar"
            :widget="widget"
            :widgetList="widget.widgetList.conditionRightList"
          >
          </RenderWigetComp>
        </template>
        <template #down_condition_left>
          <RenderWigetComp
            mark="down-condition-left"
            :widget="widget"
            :widgetList="widget.widgetList.downConditionLeftList"
          >
          </RenderWigetComp>
        </template>
        <template #down_condition_right>
          <RenderWigetComp
            mark="down-condition-right"
            :widget="widget"
            :widgetList="widget.widgetList.downConditionRightList"
          >
          </RenderWigetComp>
        </template>
        <template #main>
          <RenderWigetComp
            mark="main-up"
            :widget="widget"
            :widgetList="widget.widgetList.mainUpList"
          >
          </RenderWigetComp>
        </template>
        <template #main_down>
          <RenderWigetComp
            mark="main-down"
            :widget="widget"
            :widgetList="widget.widgetList.mainDownList"
          >
          </RenderWigetComp>
        </template>
      </VfLayoutFull>
    </div>
  </ContainerItemWrapper>
</template>

<script >
import i18n from "@/utils/i18n"
import emitter from '@/utils/emitter'
import containerItemMixin from "@/components/form-render/container-item/containerItemMixin"
import ContainerItemWrapper from '@/components/form-render/container-item/container-item-wrapper'
import refMixin from "@/components/form-render/refMixin"

import { VfLayoutFull } from '@/components/vf-layout'
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import RenderWigetComp from '../components/RenderWigetComp.vue'

export default {
  name: "layout-full-item",
  componentName: 'ContainerItem',
  mixins: [i18n, emitter, containerItemMixin, refMixin],
  inject: ['refList', 'sfRefList', 'globalModel'],
  components: {
    VfLayoutFull,
    RenderWigetComp,
    ContainerItemWrapper,
    ...FieldComponents,
  },
  props: {
    widget: Object,
    // 最小高度
    minHeight: { type: Number },
    // 布局主要区域样式(右侧主区域)
    mainStyle: { type: Object, default: null },
    //是否编辑状态
    designState: { type: Boolean, default: false },
  },
  data() {
    return {
      enableAside: true,
      upDownEnabled: true,
      mainCondition: true
    }
  },
  //拖动改变面板大小
  computed: {
    customClass() {
      return this.widget.options.customClass || 'full-height'
    },
    layoutAttrs () {
      return this.initLayoutAttrs()
    }
  },
  created() {
    this.initRefList()
    this.executeOnLifecycleFunc('onCreated')
  },
  mounted() {
    this.executeOnLifecycleFunc('onMounted')
  },
  beforeUnmount() {
    this.unregisterFromRefList()
  },
  methods: {
    /**
     * 初始化布局组件属性
     */
    initLayoutAttrs() {
      const { options } = this.widget
      let resAttrs = { ...options }
      this.enableAside = resAttrs.enableAside
      this.upDownEnabled = resAttrs.upDownEnabled
      this.mainCondition = resAttrs.mainCondition
      delete resAttrs.onCreated
      delete resAttrs.onMounted
      return resAttrs
    },
    /**
     * 设置侧边栏显示或隐藏
     * 
     * @param state true 隐藏 / false显示
     */
    setAsideHidden(state) {
      this.enableAside = !state
    },
    /**
     * 控制上下布局
     * state: true 显示 /false
     */
    setUpDownEnabled(state) {
      this.upDownEnabled = state
    },
    /**
     *  控制条件区域(上部)
     * state: true 显示 /false
     */
    setMainConEnabled(state) {
      this.mainCondition.enabled = state
    },
    /**
     * 检查接收哪些组件拖放，如不接受某些组件拖放，则根据组件类型判断后返回false
     * @param evt
     * @returns {boolean}
     */
    checkContainerMove(evt) {
      return true
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/function.scss";

.rk-form-render-container {
  .container-wrapper:has(.layout-container) {
    height: 100%;
  }
}

.layout-full-container {
  height: 100% !important;
  // margin: 2px;
  :deep(.button-group-item) {
    width: 100%;
  }
  :deep(.button-item) {
    margin-right: 12px;
    &:last-child {
      margin-right: 0;
    }
  }
  :deep(.design-time-bottom-margin),
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>
<style lang="scss">
// .layout-aside-enable {
//   .vxe-table--border-line {
//     border-left: none !important;
//     border-right: none !important;
//   }
// }
</style>
